<!-- UserInfo.vue -->
<template>
    <el-card class="user-info-card">
      <div class="user-info-header">
        <img :src="require(`@/assets/shenying.jpg`)" class="user-avatar" />
        <div class="user-details">
          <h3>{{ user.name }}</h3>
          <p>性别: {{ user.gender }}</p>
          <p>权限等级: {{ user.level }}</p>
        </div>
      </div>
    </el-card>
  </template>
  
  <script>
  import axios from 'axios';
  
  export default {
    data() {
      return {
        user: {}
      };
    },
    beforeMount() {
      axios.post('/api/user/getinfo',localStorage.getItem('user_id'), {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(res => {
        this.user = res.data.data;
        //this.user.img=require(`${this.user.img}`)
        console.log(this.user.img);
      });
    }
  };
  </script>
  
  <style scoped>
  .user-info-card {
    width: 350px;
    margin: 20px auto;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
  }
  
  .user-info-header {
    display: flex;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #ebeef5;
  }
  
  .user-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-right: 20px;
    border: 2px solid #409EFF;
  }
  
  .user-details {
    display: flex;
    flex-direction: column;
  }
  
  .user-details h3 {
    margin: 0;
    font-size: 1.4em;
    color: #333;
  }
  
  .user-details p {
    margin: 5px 0;
    color: #666;
  }
  
  .user-info-card h3,
  .user-info-card p {
    font-family: 'Arial', sans-serif;
  }
  </style>
  